<template>
  <div>
    <button @click="com = 'UserAccount'">显示用户账号组件</button><br>
    <button @click="com = 'Userinfo'">显示用户信息组件</button>
    <!-- 动态组件:component -->
    <!-- 解决的问题:在同一个地方,多个组件切换显示 -->
    <!-- 通过 is来指定组件名称即可实现切换  -->
    <component :is="com"></component>
  </div>
</template>

<script>
import Userinfo from './components/Userinfo.vue'
import UserAccount from './components/UserAccount.vue'
export default {
 components:{
  Userinfo,
  UserAccount
 },

  data() {
    return {
      com:''
    };
  },
};
</script>

<style>

</style>